<template>
	<view>
		<view class="loading">
			<u-loading mode="circle" :show="loading" size="40"></u-loading>
		</view>
		<u-empty text="还没有订单哦,快去下单吧" mode="order" v-if="list.length == 0"></u-empty>
		<swiper-item class="swiper-item">
			<scroll-view scroll-y style="height:100%;width: 100%;">
				<view class="page-box">
					<view v-for="item in list" :key="item.orderId">
						<u-card :head-border-bottom="false" :foot-border-top="false" padding="6"
							@click="toOrderDetail(item)">
							<view class="" slot="body">
								<view class="head-container">
									<view>
										<text class="orderTime">订单时间: {{item.orderTime}}</text>
										<text>就餐方式:
											<text v-if="item.tableId!=null && item.tableId != ''">堂食</text>
											<text v-else>外卖</text>
										</text>
									</view>
									<view class="img-container">
										<view class="img-box" v-for="detail in item.orderDetails"
											:key="detail.orderDetailId">
											<image :src="detail.dishImg" class="img"></image>
										</view>
									</view>
								</view>
							</view>
							<view class="" slot="foot">
								<view style="display: flex; flex-wrap: wrap;">
									<view class="item-container">
										<text class="statusLabel">订单状态:
											<text v-if="item.orderStatus === '0'">未支付
												<u-button size="mini" class="payButton" @click="goPay(item.orderId)"
													type="warning">去支付</u-button>
											</text>
											<text v-else-if="item.orderStatus === '1'">已支付</text>
											<text v-else-if="item.orderStatus === '2'">已取消</text>
											<text v-else-if="item.orderStatus === '3'">已完成
												<u-button size="mini" class="payButton" @click="goAppraise(item.orderId)"
													type="primary">去评价</u-button></text>
											<text v-else>未知</text>
										</text>
										<text class="subtotal">
											<input :value="calculateSubtotal(item)" disabled></input>
										</text>
									</view>

								</view>

							</view>
						</u-card>
					</view>
				</view>
			</scroll-view>
		</swiper-item>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getOrder
	} from '@/api/system/order/order'
	import {
		submitPay
	} from '@/api/system/shop/shop'
	export default {
		data() {
			return {
				loading: true,
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userId: null,
					orderId: null,
					orderTime: null,
					orderStatus: null,
					tableId: null,
					addressId: null,
					deliveryStatus: null,
					courierId: null,
				},
			}
		},
		onLoad() {
			this.getorderList()
		},
		methods: {
			goAppraise(){
				this.$modal.msg("功能暂未开放哦");
			},
			// 支付
			goPay(orderId) {
				const payData = {
					"orderId": orderId
				}
				submitPay(payData).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.$refs.uToast.show({
							title: '支付成功',
							type: 'success'
						})
						// getorderList()
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success() {
									uni.navigateTo({
										url: '/pages/order/order'
									});
								}
							});
						}, 500)
					}
				})
			},
			// 订单列表
			getorderList() {
				getOrder(this.queryParams).then(res => {
					this.list = res.rows
					console.log(res)
					this.loading = false

					// 设置图片完整路径
					const hostname = config.baseUrl
					// console.log(hostname)
					this.list = this.list.map(item => ({
						...item,
						orderDetails: item.orderDetails.map(child => ({
							...child,
							dishImg: hostname + child.dishImg
						}))
					}));
				})
			},
			// 跳转详情
			toOrderDetail(item) {
				this.$tab.navigateTo("/pages/order/orderDetail?item=" + encodeURIComponent(JSON.stringify(item)));
			},
			// 订单金额
			calculateSubtotal(data) {
				let subtotal = 0;
				if (data.orderDetails && data.orderDetails.length > 0) {
					data.orderDetails.forEach((detail) => {
						subtotal += detail.subtotal;
					});
				}
				return '￥'+subtotal;
			}
		}
	}
</script>

<style>
	
	.subtotal{
		width: 20%;
	}
	
	.payButton {
		margin-left: 8vw;
	}

	.cart-shop {
		display: flex;
		flex: 1;
		overflow: hidden;
	}

	.img-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 10px 5px 6px;
	}

	.img-box {
		width: 60px;
		height: 60px;
		margin-right: 8px;
		margin-bottom: 8px;
		/* 调整图片之间的间距 */
	}

	.img {
		border-radius: 10px;
		width: 100%;
		height: 100%;
	}

	.loading {
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.swiper-item {
		height: 80%;
	}

	.head-container {
		margin-left: 10px;
	}

	.item-container {
		margin-left: 10px;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 30px;
	}

	.statusLabel {
		width: 80%;
	}

	.orderTime {
		margin-right: 8vw;
	}

	.address-add {
		margin-left: 13%;
		padding-bottom: 10%;
		width: 74%;
	}

	.top {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding-top: 0.5vh;
		padding-left: 5vw;
		padding-right: 5vw;
		width: 100%;
		background-color: ghostwhite;
		height: 4.5vh;
	}

	.top-left {
		margin-left: 0vw;
	}

	.top-right {
		text-align: right;
		margin-right: 0vw;
	}

	.two {
		margin-top: 1vh;
	}

	.phone {
		margin-right: 10vw;
	}
</style>